<template>
	<view class="home-container">
		<!-- 瀑布流内容 -->
		<view class="masonry">
			<view class="masonry-col" v-for="(col, colIdx) in columns" :key="colIdx">
				<view class="card" v-for="(item, idx) in col" :key="idx" @click="goDetail(item)">
					<image v-if="item.img" :src="item.img" class="card-img" mode="aspectFill" />
					<view class="card-title">{{ item.title }}</view>
					<view class="card-footer">
						<image class="avatar" :src="item.avatar" />
						<text class="user">{{ item.user }}</text>
						<text class="like"><text class="icon-like" />{{ item.like }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航栏占位 -->
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
// 简单瀑布流分列算法
function splitToColumns(list, colNum = 2) {
	const cols = Array.from({ length: colNum }, () => []);
	list.forEach((item, idx) => {
		cols[idx % colNum].push(item);
	});
	return cols;
}
export default {
	data() {
		return {
			activeTab: 1,
			tabBadge: [1, 0],
			cardList: [
				{ id: 1, title: '做了一个 Coffee Chat app，终于可以上线啦', img: 'https://dummyimage.com/300x300/fff/19cf8a&text=Coffee', user: '小红薯67C1AC28', avatar: 'https://dummyimage.com/40x40/19cf8a/fff', like: 212 },
				{ id: 2, title: '谁可以帮忙做一下PHP这个作业，有偿有偿', img: 'https://dummyimage.com/300x200/eee/333', user: '0923.', avatar: 'https://dummyimage.com/40x40/333/fff', like: 4 },
				{ id: 3, title: '期末大学生作业有人接吗，做一个像王者荣耀那种的游戏就好了，预算20r', img: '', user: 'LIFE', avatar: 'https://dummyimage.com/40x40/888/fff', like: 4 },
				{ id: 4, title: '失业人员开始学习啦', img: 'https://dummyimage.com/300x200/eee/888', user: '沪漂三人组', avatar: 'https://dummyimage.com/40x40/888/fff', like: 215 },
			]
		}
	},
	computed: {
		columns() {
			return splitToColumns(this.cardList, 2);
		}
	},
	methods: {
		goDetail(item) {
			uni.navigateTo({
				url: `/pages/article-detail/index?id=${item.id || idx}`
			})
		}
	}
}
</script>

<style lang="less">
.home-container {
	background: #f5f5f5;
	min-height: 100vh;
}
.masonry {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 12px 0 12px;
}
.masonry-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
}
.card-img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	background: #f5f5f5;
}
.card-title {
	font-size: 16px;
	color: #222;
	padding: 10px 12px 0 12px;
	font-weight: bold;
}
.card-footer {
	display: flex;
	align-items: center;
	padding: 8px 12px 10px 12px;
}
.avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	margin-right: 6px;
}
.user {
	font-size: 13px;
	color: #888;
	margin-right: auto;
}
.like {
	font-size: 13px;
	color: #888;
	display: flex;
	align-items: center;
}
.icon-like {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14s6-4.35 6-8.5A3.5 3.5 0 0 0 8 3.5 3.5 3.5 0 0 0 2 5.5C2 9.65 8 14 8 14Z" fill="%23e23e3e"/></svg>') center/contain no-repeat;
	margin-right: 2px;
}
</style>
